<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/variable.css">
		<link rel="stylesheet" href="css/goods.css">
	</head>
	<body>
		<header>
			<!-- 版心 -->
			<div class="header-content">
				<!-- 头部左边logo -->
				<div class="header-left-logo">
					<a href="#"></a>
				</div>
				<!-- 头部右边顶部导航栏 -->
				<div class="header-right-top-nav">
					<ul class="right-top-nav">
						<li>
							<a href="#" class="loginBtn">登录</a>
							<a href="#" class="registerBtn">注册</a>
						</li>
						<li class="top-nav-line"></li>
						<li class="shopping-cart">
							<a href="" >购物车</a>
							<!-- 购物车下拉菜单 -->
							<div class="shopping-cart-list">
								<div class="cart-list-top"><a href="">你的购物车暂时没有商品...</a></div>
								<div class="cart-list-bottom"><a href="">快去抢购良仓商品吧！</a></div>
							</div>
						</li>
						<li class="top-nav-line"></li>
						<li class="message">
							<a href="">消息</a>
							<!-- 消息下拉菜单 -->
							<div class="message-list">
								<a href="">
									 动态
									<span>0</span>
								</a>
								<a href="">
									 评论
									<span>0</span>
								</a>
								<a href="">
									 私信
									<span>0</span>
								</a>
								<a href="">
									 粉丝
									<span>0</span>
								</a>
								<a href="">
									 喜欢
									<span>0</span>
								</a>
								<a href="">
									 通知
									<span>0</span>
								</a>
							</div>
						</li>
						<li class="top-nav-line"></li>
						<li class="add"><a href="">添加良品</a></li>
						<li class="agreement"><a href="">资质证照 / 协议规则</a></li>
					</ul>
				</div>
			</div>
		</header>
		<!-- 良仓导航栏 -->
		<nav>
			<!-- 导航栏版心 -->
			<div class="nav-content">
				<ul>
					<li><a href="">首页</a></li>
					<li class="nav-shop">
						<a href="">商店</a>
						<!-- 商店下拉菜单 -->
						<div class="nav-shop-list">
							<div class="shop-list-left">
								<ul>
									<li>
										<img src="img/commodity-1.png" alt="">
										<a href="">家居</a>
									</li>
									<li>
										<img src="img/commodity-1.png" alt="">
										<a href="">家居</a>
									</li>
									<li>
										<img src="img/commodity-1.png" alt="">
										<a href="">家居</a>
									</li>
									<li>
										<img src="img/commodity-1.png" alt="">
										<a href="">家居</a>
									</li>
									<li>
										<img src="img/commodity-1.png" alt="">
										<a href="">家居</a>
									</li>
									<li>
										<img src="img/commodity-1.png" alt="">
										<a href="">家居</a>
									</li>
									<li>
										<img src="img/commodity-1.png" alt="">
										<a href="">家居</a>
									</li>
									<li>
										<img src="img/commodity-1.png" alt="">
										<a href="">家居</a>
									</li>
									<li>
										<img src="img/commodity-1.png" alt="">
										<a href="">家居</a>
									</li>
									<li>
										<img src="img/commodity-1.png" alt="">
										<a href="">家居</a>
									</li>
									<li>
										<img src="img/commodity-1.png" alt="">
										<a href="">家居</a>
									</li>
									<li>
										<img src="img/commodity-1.png" alt="">
										<a href="">家居</a>
									</li>
									<li>
										<img src="img/commodity-1.png" alt="">
										<a href="">家居</a>
									</li>
									<li>
										<img src="img/commodity-1.png" alt="">
										<a href="">家居</a>
									</li>
									<li>
										<img src="img/commodity-1.png" alt="">
										<a href="">家居</a>
									</li>
								</ul>
							</div>
							<div class="shop-list-right">
								<img src="img/img-1.jpg" alt="">
								<a href="">新视线：  2015年7月刊</a>
							</div>
							<div class="shop-list-bottom">
								<a href="">查看所有品牌&gt;</a>
								<a href="">最新到货&gt;</a>
							</div>
						</div>
					</li>
					<li class="nav-magazine">
						<a href="">杂志</a>
						<div class="nav-magazine-list">
							<ul>
								<li><a href="">趣物</a></li>
								<li><a href="">趣物</a></li>
								<li><a href="">趣物</a></li>
								<li><a href="">趣物</a></li>
								<li><a href="">趣物</a></li>
								<li><a href="">趣物</a></li>
								<li><a href="">趣物</a></li>
								<li><a href="">趣物</a></li>
								<li><a href="">趣物</a></li>
								<li><a href="">趣物</a></li>
								<li><a href="">趣物</a></li>
								<li><a href="">趣物</a></li>
								<li><a href="">趣物</a></li>
								<li><a href="">趣物</a></li>
								<li><a href="">趣物</a></li>
							</ul>
						</div>
					</li>
					<li class="nav-share">
						<a href="">分享</a>
						<div class="nav-share-list">
							<ul>
								<li><a href="">男士</a></li>
								<li><a href="">男士</a></li>
								<li><a href="">男士</a></li>
								<li><a href="">男士</a></li>
								<li><a href="">男士</a></li>
								<li><a href="">男士</a></li>
								<li><a href="">男士</a></li>
								<li><a href="">男士</a></li>
								<li><a href="">男士</a></li>
								<li><a href="">男士</a></li>
								<li><a href="">男士</a></li>
								<li><a href="">男士</a></li>
								<li><a href="">男士</a></li>
								<li><a href="">男士</a></li>
								<li><a href="">男士</a></li>
							</ul>
						</div>
					</li>
					<li><a href="">达人</a></li>
					<li><a href="">有偿咨询</a></li>
					<li>
						<div class="nav-search">
							<input type="text" placeholder="serch...">
							<a href=""></a>
						</div>
					</li>
				</ul>
			</div>
		</nav>
		<main>
			<!-- 商品主要内容版心 -->
			<div class="goods-content">
				<!-- 左边商品详情内容 -->
				<div class="goods-left">
					<!-- 导航位置 -->
					<div class="Navigation">
						<a href="index.html">良仓</a>&gt
						<a href="#">美食</a>&gt
						<a href="#">地方特产</a>&gt
						&gt黑金霸气龙粽六粽版 | 足量足料 味道更足
					</div>
					<!-- 商品详情 -->
					<div class="details">
						<!-- 商品详情左边 -->
						<div class="details-left">
							<!-- 商品展示 -->
							<div class="goods-img">
								<img src="img/goods1.jpg" alt="">
							</div>
							<!-- 商品列表 -->
							<div class="goods-list">
								<ul class="goods-list-ul">
									<li><img src="img/goods1.jpg" alt=""></li>
									<li><img src="img/goods2.jpg" alt=""></li>
									<li><img src="img/goods3.jpg" alt=""></li>
									<li></li>
									<li></li>
								</ul>
								<!-- 左右两边箭头 -->
								<span class="prev"></span>
								<span class="next"></span>
							</div>
						</div>
						<!-- 商品详情右边 -->
						<div class="details-right">
							<!-- 商品喜欢 -->
							<div class="goods-like">
								
							</div>
							<!-- 商品标题 -->
							<div class="goods-title">
								
							</div>
							<!-- 商品描述 -->
							<div class="goods-describe">
								
							</div>
							<!-- 商品价格 -->
							<div class="goods-price">
								
							</div>
							<!-- 支持权益 -->
							<div>
								
							</div>
							<!-- 商品类别 -->
							<div>
								
							</div>
							<!-- 配送地址 -->
							<div>
								
							</div>
							<!-- 数量 -->
							<div>
								
							</div>
							<!-- 立即购买 -->
							<div>
								
							</div>
							<!-- 加入购物车和分享按钮 -->
							<div>
								
							</div>
						</div>
					</div>
				</div>
				<!-- 右边猜你喜欢内容 -->
				<div class="goods-right">
					
				</div>
			</div>
		</main>
	</body>
</html>